<script setup lang="ts">
import viewport from './components/print-designer/viewport/index.vue'
import componentsPanel from './components/print-designer/components-panel/index.vue'
import {useComStore} from "./store/com.ts";
import {onMounted} from "vue";
import {datas, page} from "./data/data.js";
import lodop from "./utils/util.ts";

const comStore = useComStore()

const click=()=>{
  window.$lodop.preview(comStore.page,[]);
}

onMounted(()=>{
  //初始化数据
  comStore.initPage(page)
  comStore.initOptionItems(datas)
})

window.$lodop = lodop;
</script>

<template>
  <div class="main" data-theme="qy-designer">
    <button @click="click">预览</button>
    <components-panel/>
    <viewport/>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  user-select: none;
}
</style>
